<div fxLayout="row" fxLayoutGap="5%" fxLayout.lt-md="column" fxLayoutGap.lt-md="0px" class="main-wrapper">
    <div fxFlex="70%">
        <div fxLayout="column" fxLayoutGap="20px">
            <div *ngIf="address">
                <div class="heading">
                        <div>{{"LABEL_DELIVERY_ADDRESS" | translate}}</div>
                </div>
                <mat-card class="mat-elevation-z6">
                    <div>{{address?.fullName}}</div>
                    <div>{{address?.streetAddress}}, {{address?.city}}, {{address?.state}}, {{address?.zipCode}}</div>
                    <div>{{address?.country}}</div>
                    <div><span translate>PHONE_NUMBER</span> {{address?.mobileNum}}</div>
                </mat-card>
            </div>
            <div>
                <div class="heading mat-elevation-z6">
                        <div>{{"LABEL_CHOOSE_A_DELIVERY_SPEED" | translate}}</div>
                </div>
                <mat-table [dataSource]="dataSource" class="mat-elevation-z6">
                    <ng-container matColumnDef="Selection">
                        <mat-header-cell *matHeaderCellDef fxFlex="20%"></mat-header-cell>
                        <mat-cell *matCellDef="let element" fxFlex="20%">
                            <mat-radio-button (click)=selectMethod(element.id)></mat-radio-button>
                        </mat-cell>
                    </ng-container>
                    <ng-container matColumnDef="Name">
                        <mat-header-cell *matHeaderCellDef fxFlex="30%"></mat-header-cell>
                        <mat-cell *matCellDef="let element" fxFlex="30%">{{ element.name }}</mat-cell>
                    </ng-container>
                    <ng-container matColumnDef="Price">
                        <mat-header-cell *matHeaderCellDef translate="LABEL_PRICE" fxFlex="25%"></mat-header-cell>
                        <mat-cell *matCellDef="let element" fxFlex="25%">{{ element.price.toFixed(2) }}&curren;</mat-cell>
                    </ng-container>
                    <ng-container matColumnDef="ETA">
                        <mat-header-cell *matHeaderCellDef translate="LABEL_EXPECTED_DELIVERY" fxFlex="25%"></mat-header-cell>
                        <mat-cell *matCellDef="let element" fxFlex="25%">{{ element.eta }} {{"LABEL_DAYS" | translate}}</mat-cell>
                    </ng-container>
                    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
                </mat-table>
            </div>
        </div>
    </div>
    <div fxFlex="30%">
        <mat-card class="mat-elevation-z6" fxLayoutAlign="end">
            <button mat-raised-button mat-button class="btn btn-continue" color="primary" aria-label="Proceed to delivery method selection" [disabled]="deliveryMethodId === undefined" (click)="chooseDeliveryMethod()">
                <span translate>LABEL_CONTINUE</span>
            </button>
        </mat-card>
    </div>
</div>
